<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css 盒子模型</title>
	<style type="text/css">
		
		.box{
			width:200px;
			height:100px;
			background-color:gold;
			
			/* border-top-width:10px;
			border-top-color:#000;
			
			实线：solid   虚线:dashed  点线:dotted
			border-top-style: solid; */

			/* border-top:10px solid #000;
			border-left:10px dashed #000;
			border-right:10px dotted #000;
			border-bottom:10px solid #000; */

			border:10px solid #000;

			/* 

			padding-top:20px;
			padding-left:40px;
			padding-right:100px;
			padding-bottom:200px; 

			*/

			/* 
			 分别设置：上  右  下 左 的值
			padding:20px 100px 200px 40px; 

			*/

            /*  分别设置：上(20px)  左右(100px)  下(200px) 的值 
			padding:20px 100px 200px;*/

			 /* 分别设置：上下(20px)  左右(100px) 的值
			padding:20px 100px;*/

			/* 同时设置四个边的值	 */
			padding:100px;


		/* 
			margin-top:50px;
			margin-left:100px;
			margin-right:200px;
			margin-bottom:300px; 
		*/

			/* 
			 分别设置：上  右  下 左 的margin值
			margin:20px 100px 200px 40px; 

			*/

            /*  分别设置：上(20px)  左右(100px)  下(200px) 的margin值 
			margin:20px 100px 200px;*/

			 /* 分别设置：上下(20px)  左右(100px) 的margin值
			margin:20px 100px;*/


			/* 同时设置四个边的margin值	 
			margin:100px;*/


			/* 
				

			   */

			   margin:100px auto;







		}



	</style>
</head>
<body>
	<div class="box">元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：</div>
	<div class="box">元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：</div>
</body>
</html>